<template>
    <div class=''>
        <Upload ref="upload" :multiple="multiple" :show-upload-list="false" :on-error="error" :on-success="success" :before-upload="beforeUpload" name="file" :action="url" >
            <Button :type="type" :size="size" v-if="!slotstatus">上传</Button>
            <slot v-if="slotstatus"></slot>
        </Upload>
    </div>
</template>
<script>
export default {
    props: { size: { type: String, default: "default" }, type: { type: String, default: "primary" }, num: { type: Number, default: 1 }, name: String, slotstatus: { type: Boolean, default: false }},
    components: {},
    data() {
        //这里存放数据
        return {
            multiple: false,
            uploadList: [],
            url: window.basefile + "/ajax/upload"
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        num(val) {
            if (val > 1) {
                this.multiple = true
            } else {
                this.multiple = false
            }
        }
    },
    //方法集合,
    methods: {
        //上传前检测数量
        beforeUpload() {
            const check = this.uploadList.length < this.num;
            if (!check) {
                this.$Notice.warning({
                    title: '上传数量已超上限'
                });
            }
            return check;
        },
        error() {
            this.$Notice.error({
                title: '文件上传失败'
            });
            this.uploadList = []
        },
        success(res) {
            this.$emit("uploadurl", this.name, res.data.fullurl)
            this.uploadList = []
            this.$Notice.success({
                title: '上传成功'
            });
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.uploadList = this.$refs.upload.fileList;
    }
}
</script>
<style lang='scss' scoped>
</style>